<template>
  <div>
    <h2 style="text-align:center">发布新课程</h2>
    <el-steps :active="active" simple>
      <el-step title="填写课程基本信息" icon="el-icon-edit"/>
      <el-step title="创建课程大纲" icon="el-icon-upload"/>
      <el-step title="发布课程" icon="el-icon-picture"/>
    </el-steps>
    <!--
  子页面的引入使用：
    1、先引入子页面到当前页面中
    2、在vue对象的自定义组件列表中 注册子组件
    3、使用注册的组件名当做自定义标签使用，就可以被vue解析成原来的页面引入到当前页面中
 -->
    <step1 v-if="active===0" />
    <step2 v-if="active===1" />
    <step3 v-if="active===2 || active===3" />

  </div>
</template>
<script>
import step1 from '@/views/course/components/step1'
import step2 from '@/views/course/components/step2'
import step3 from '@/views/course/components/step3'
export default {
  components: {
    step1, step2, step3
  },
  data() {
    return {
      courseId: null, // 用来保存课程的id
      active: 0
    }
  }
}
</script>
